import { useMany, getDefaultFilter } from "@refinedev/core";

import {
  List,
  TextField,
  EditButton,
  ShowButton,
  FilterDropdown,
  TagField,
  useTable,
  useSelect,
} from "@refinedev/antd";

import { Table, Space, Select, Radio, Spin, Result } from "antd";

import type { IPost, ICategory } from "../../interfaces";

export const PostList = () => {
  const { tableProps, filters, overtime } = useTable<IPost>({
    syncWithLocation: true,
  });

  const categoryIds =
    tableProps?.dataSource?.map((item) => item.category.id) ?? [];
  const { data, isLoading } = useMany<ICategory>({
    resource: "categories",
    ids: categoryIds,
    queryOptions: {
      enabled: categoryIds.length > 0,
    },
  });

  const { selectProps: categorySelectProps } = useSelect<ICategory>({
    resource: "categories",
    optionLabel: "title",
    optionValue: "id",
    defaultValue: getDefaultFilter("category.id", filters, "in"),
  });

  const renderTable = (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="title" title="Title" />
      <Table.Column
        dataIndex={["category", "id"]}
        title="Category"
        render={(value) => {
          if (isLoading) {
            return <TextField value="Loading..." />;
          }

          return (
            <TextField
              value={data?.data.find((item) => item.id === value)?.title}
            />
          );
        }}
        filterDropdown={(props) => (
          <FilterDropdown
            {...props}
            mapValue={(selectedKeys) => selectedKeys.map(Number)}
          >
            <Select
              style={{ minWidth: 200 }}
              mode="multiple"
              placeholder="Select Category"
              {...categorySelectProps}
            />
          </FilterDropdown>
        )}
        defaultFilteredValue={getDefaultFilter("category.id", filters, "in")}
      />
      <Table.Column
        dataIndex="status"
        title="Status"
        render={(value: string) => <TagField value={value} />}
        filterDropdown={(props) => (
          <FilterDropdown {...props}>
            <Radio.Group>
              <Radio value="published">Published</Radio>
              <Radio value="draft">Draft</Radio>
              <Radio value="rejected">Rejected</Radio>
            </Radio.Group>
          </FilterDropdown>
        )}
      />
      <Table.Column<IPost>
        title="Actions"
        dataIndex="actions"
        render={(_, record) => (
          <Space>
            <EditButton hideText size="small" recordItemId={record.id} />
            <ShowButton hideText size="small" recordItemId={record.id} />
          </Space>
        )}
      />
    </Table>
  );

  const renderContent = () => {
    if (overtime.elapsedTime) {
      return (
        <Result
          icon={<Spin size="large" />}
          status="warning"
          title="This takes a bit longer than expected. Please
                    wait..."
        />
      );
    }

    return renderTable;
  };

  return <List>{renderContent()}</List>;
};
